<template>
  <div id="bigPage">
    <div id="tip">主页</div>
    <ul>
      <li
        v-for="(tip, index) in $route.params.tips"
        :key="index"
        :id="tip.tipline"
        @click="switchs(tip.tipline, $route.params.tips)"
      >
        <p>{{ tip.tip }}</p>
      </li>
    </ul>
    <!-- <img src="http://localhost:8081/lo/img/vfr1669867079799.jpg"/> -->
  </div>
</template>

<script>
import VueCookies from "vue-cookies";
export default {
  props:['root'],
  methods: {
    switchs: function (tipline, tips) {
      this.uid = JSON.parse(VueCookies.get("uid"));
      if (!this.uid) {
        alert("未登录，请先登录！");
        window.location.replace("/index");
        return false;
      } else {
        // User路由只有管理员才能操作
        // console.log('root'+this.root);
        if (tipline == "User" && !this.root){
          alert("管理员才能操作该功能！");
        }else {
          // 左边按钮路由跳转(是管理员)
          this.$router.replace({
            name: tipline,
            // 当page页面需要tips信息去渲染，就传，前其他不用传tips
            params: {
              tips: tips,
              
            },
          });
        } 
      }
    },
  },
  data() {
    return {};
  },
};
</script>

<style scoped>
@font-face {
  font-family: "iconfont";
  src: url("../fonts/iconfont_four.ttf") format("truetype");
}
* {
  list-style-type: none;
  font-family: "iconfont" !important;
}
#bigPage {
  width: 75%;
  height: 900px;
  position: absolute;
  top: 70px;
  left: 21%;
  background-color: #eee;
}
#bigPage #tip {
  width: 100%;
  height: 30px;
  background-color: #fff;

  line-height: 30px;
}

#bigPage #tip::before {
  content: "\f012b";
  padding-left: 20px;
  padding-right: 10px;
}

ul li {
  display: inline-block;
  height: 70px;
  /* border: 1px solid red; */
  margin-left: 30px;
  text-align: center;
  padding-top: 10px;
  color: #fff;
  cursor: pointer; /* 经过有手指*/
}

ul #User {
  width: 15%;
  background-color: #27a9e3;
}

ul #User::before {
  content: "\f014c";
  font-size: 28px;
}

ul #Goods {
  width: 20%;
  background-color: #28b779;
}

ul #Goods::before {
  content: "\e648";
  font-size: 28px;
}

li:nth-child(3) {
  width: 15%;
  background-color: #da542e;
}

li:nth-child(3)::before {
  content: "\e897";
  font-size: 28px;
}

li:nth-child(4) {
  width: 15%;
  background-color: #ffb848;
}

li:nth-child(4)::before {
  content: "\e606";
  font-size: 28px;
}

li:nth-child(5) {
  width: 15%;
  background-color: #2255a4;
}

li:nth-child(5)::before {
  content: "\f018f";
  font-size: 28px;
}
</style>